<!--  -->
<template>
    <div class='student'>
        <!-- 添加老师 -->
        <div style="padding:10px 0">
            <el-button type="primary" icon="el-icon-circle-plus-outline">
                <router-link tag="span" to="/addteacher">添加学生</router-link>
            </el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="stuList" border style="width:99%">
            <el-table-column prop="id" label="学生编号" width="180">
            </el-table-column>
            <el-table-column prop="date" label="入学时间" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="lesson" label="学习专业">
            </el-table-column>
            <el-table-column prop="" label="操作" width="300" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-view" @click="handlePreview(scope.row.id)">
                        预览
                    </el-button>
                    <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑
                    </el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="300">
            </el-pagination>
        </div>

        <!-- 编辑 -->
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <el-form ref="form" :model="edit" label-width="80px">
                <el-form-item label="任职日期">
                    <el-input v-model="edit.date"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="edit.name"></el-input>
                </el-form-item>
                <el-form-item label="任课科目">
                    <el-input v-model="edit.lesson"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            return {
                stuList: [],
                detail: {},
                edit: {
                    id: '',
                },
                centerDialogVisible: false
            };
        },
        computed: {},
        watch: {},
        methods: {
            async getStuListt() {
                let data = await this.$post('http://localhost:8080/json')
                this.stuList = data
            },
            async delStuList(id) {
                let data = await this.$post('http://localhost:8080/del', {
                    id
                })
                if (data) {
                    this.getStuListt()
                }
            },
            async editUserList() {
                let data = await this.$post('http://localhost:8080/edit', this.edit)
                if (data) {
                    this.getStuListt()
                }
            },
            // 详情
            handlePreview(id) {
                this.$router.push('/detail/' + id)
            },
            // 打开编辑
            handleEdit(id) {
                this.edit.id = id
                this.centerDialogVisible = true

            },
            // 提交编辑
            submit() {
                this.editUserList()
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.centerDialogVisible = false
                this.edit = {
                    id: ''
                }
            },
            // 删除
            handleDelete(id) {
                this.$confirm('此操作将此行删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delStuList(id)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        created() {
            this.getStuListt()
        },
    };

</script>
<style>
    .pagination {
        display: flex;
        justify-content: center;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
